<template>
  <a-range-picker
    v-model:value="range"
    @change="onChangePicker"
    style="width: 520px"
    :disabledDate="disabledDate"
  >
    <template #renderExtraFooter>
      <a-tag
        @click="onClickFastTime(1)"
        style="cursor: pointer; margin-left: 5px"
      >
        近1天
      </a-tag>
      <a-tag @click="onClickFastTime(3)" style="cursor: pointer">近3天</a-tag>
      <a-tag @click="onClickFastTime(7)" style="cursor: pointer">近1周</a-tag>
      <a-tag @click="onClickFastTime(30)" style="cursor: pointer">近1月</a-tag>
    </template>
  </a-range-picker>
  <a-button @click="onReset" style="margin-left: 170px; margin-right: 110px">
    重置
  </a-button>
  <a-input
    placeholder="请输入用户名/操作对象"
    allow-clear
    @pressEnter="onSearch"
    v-model:value="query.keyWord"
    size="middle"
  >
    <template #suffix>
      <span
        style="color: rgba(0, 0, 0, 0.25); cursor: pointer; font-size: 18px"
        @click="onSearch"
      >
        <iconfont name="#icon-sousuo" />
      </span>
    </template>
  </a-input>
</template>
<script setup>
import dayjs from 'dayjs'
import InputRound from '@/components/input-round.vue'
import iconfont from '@/components/iconfont.vue'
import {
  useQuery,
  useLoading,
  useDataSourceManager,
  defaultTimeRange,
} from './provide-context.js'
import { ref } from 'vue'

let { update } = useDataSourceManager()

let query = useQuery()
let loading = useLoading()

function onSearch() {
  if (loading.value) return
  update()
}

/**
 * 时间
 */

let range = ref(defaultTimeRange())
function onChangePicker(r) {
  if (r) {
    query.value.start = r[0].format()
    query.value.end = r[1].format()
  } else {
    delete query.value.start
    delete query.value.end
  }
  update()
}
function onClickFastTime(num) {
  let end = dayjs()
  let start = end.subtract(num === 1 ? 1 : num - 1, 'day')
  range.value = [start, end]
  onChangePicker(range.value)
}
/**
 * 重置
 */
function onReset() {
  if (loading.value) return
  range.value = defaultTimeRange()
  delete query.value.keyWord
  query.value.start = range.value[0].format()
  query.value.end = range.value[1].format()
  update()
}
/**
 * 日期限制
 */
function disabledDate(day) {
  let currentDay = dayjs()
  let sixMonthsAgo = currentDay.subtract(6, 'month')
  return currentDay.isBefore(day) || day.isBefore(sixMonthsAgo)
}
</script>
